import React, { Component, Fragment } from 'react';
import { Form, Input, Button, Row, Col, message } from 'antd';
import { MessageFilled, MobileFilled, UnlockFilled } from '@ant-design/icons';
import { register } from '../../api/account'

//组件
import Code from '../../components/code/index'

class RegisterForm extends Component {
    formRef = React.createRef();
    constructor(props) {
        super(props);
        this.state = {
            username:""
        };
    }
    onFinish = async (values) => {
        let data = {
            username: values.username,
            password: values.passWord,
            code: values.code
        }
        await register(data).then(res => {
            message.success("注册成功！");
        })
    };

    //获取邮箱
    getUser = () => {
        let username = this.formRef.current.getFieldValue('username');
        console.log(username)
        this.setState({
            username,
        })
    };

    render() {
        const {username} = this.state;
            return (
                <Fragment>
                    <Form
                        ref={this.formRef}
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                    >
                        <Form.Item name="username" rules={[{ required: true, message: '请输入邮箱' }, {
                            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '请输入正确的邮箱'
                        }]}>
                            <Input onChange={this.getUser} prefix={<MobileFilled className="site-form-item-icon" />} placeholder="请输入邮箱" />
                        </Form.Item>
                        <Form.Item name="passWord" rules={[{ required: true, message: '请输入密码' }]}>
                            <Input.Password prefix={<UnlockFilled className="site-form-item-icon" />} placeholder="请输入密码" />
                        </Form.Item>
                        <Form.Item name="oldPassWord" rules={[{ required: true, message: '请再次输入密码' }, ({ getFieldValue }) => ({
                            validator(rule, value) {
                                if (!value || getFieldValue('passWord') === value) {
                                    return Promise.resolve();
                                } else {
                                    return Promise.reject('两次密码输入的不一致');
                                }
                            }
                        })]}>
                            <Input.Password prefix={<UnlockFilled className="site-form-item-icon" />} placeholder="请再次输入密码" />
                        </Form.Item>
                        <Form.Item name="code" rules={[{ required: true, message: '请输入验证码' }, { len: 6, message: '请输入长度为6的验证码' }]}>
                            <Row getters={13}>
                                <Col span={15}><Input prefix={<MessageFilled className="site-form-item-icon" />} placeholder="请输入验证码" /></Col>
                                <Col span={8} offset={1}> <Code username={username} type='register'></Code> </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" block>注册</Button>
                        </Form.Item>
                    </Form>
                </Fragment>
            )
    }
}
export default RegisterForm;